<template>
  <PageView :pageData="Page" @operateChange="operateChange"> </PageView>
</template>
<script setup>
import { getRoleList, deleteRole, editRole, addRole } from "@/api/roles";
import { authUserPermission } from "@/api/user";
import { getPermissionList } from "@/api/permission";
import Tool from "@/utils/tool";

const selectedRowKeys = ref([]);
let tree = [];
let level = [];
const getPermission = async () => {
  const res = await getPermissionList();
  if (res.code === rescf.codeVal) {
    level = res.data;
    tree = Tool.arrayToTree(level, -1, "parentId");
    tree = Tool.compare(tree, "sort");
  }
};

getPermission();

const operateChange = (info, row) => {
  console.log(info, row);
};

const onSelectChange = (selectedRowKeys) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  selectedRowKeys.value = selectedRowKeys;
};

const Page = markRaw({
  addBtn: {
    label: "添加",
    type: "primary",
    icon: "icon iconfont icon-add",
    method: addRole,
    beforeCreate: () => {
      if (level && level.length > 0) {
        selectedRowKeys.value = level.map((a) => a.id);
        Page.modal.data[2].options = tree;
      }
    },
    success: async (val, val2) => {
      await authUserPermission({
        roleId: val2,
        menuIds: val.rolePermission,
      });
    },
  },
  form: {
    data: [
      {
        type: "Input",
        field: "name",
        label: "角色名",
        value: "",
        placeholder: "角色名",
        allowClear: true,
      },
      // {
      //   type: "RangePicker",
      //   field: "date",
      //   label: "日 期",
      //   value: null,
      //   valueFormat: "YYYY-MM-DD",
      //   arr2obj: ["startTime", "endTime"],
      // },
    ],
    btns: [
      {
        label: "查询",
        key: "search",
        icon: "icon iconfont icon-sousuo1",
        type: "primary",
      },
    ],
  },
  table: {
    // scroll: {
    //   y: 540,
    // },
    columns: [
      {
        title: "序号",
        key: "serial",
        width: 80,
      },
      {
        title: "角色名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "角色标识",
        dataIndex: "code",
        key: "code",
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "操作",
        width: 180,
        key: "operate",
        btns: [
          {
            label: "编辑",
            class: "table_edit-btn",
            icon: "icon iconfont icon-bianji",
            key: "edit",
            beforeCreate: () => {
              if (level && level.length > 0) {
                selectedRowKeys.value = level.map((a) => a.id);
                Page.modal.data[2].options = tree;
              }
            },
            method: editRole,
            success: async (val, val2) => {
              await authUserPermission({
                roleId: val2,
                menuIds: val.rolePermission.split(","),
              });
            },
          },
          {
            label: "删除",
            class: "table_del-btn",
            icon: "icon iconfont icon-shanchu",
            key: "delete",
            content: "请确认是否删除？",
            method: deleteRole,
          },
        ],
      },
    ],
    data: getRoleList,
  },
  modal: {
    title: "角色",
    width: 820,
    className: "spec-modal",
    data: [
      {
        type: "Input",
        field: "name",
        label: "角色名称：",
        value: "",
        labelWidth: "90px",
        placeholder: "角色名称",
        rules: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "code",
        label: "角色标识：",
        value: "",
        placeholder: "角色标识",
        labelWidth: "90px",
      },
      {
        type: "Tree",
        field: "rolePermission",
        label: "赋予权限：",
        value: selectedRowKeys,
        placeholder: "赋予权限",
        style: {
          height: '500px',
          overflowY: 'auto'
        },
        labelWidth: "90px",
        checkable: true,
        optionsProps: {
          labelKey: "title",
          valueKey: "key",
          label: "name",
          value: "id",
          children: "children",
        },
        options: [],
        arr2str: true,
      },
    ],
  },
});
</script>
<style scoped lang="scss"></style>
